<script setup lang="ts">
import {CardBody, CardContainer,CardItem} from "~/components/ui/card-3d";
import type {PreviewCardItem} from "~/types";
import BoxReveal from "~/components/ui/BoxReveal.vue";
import BlurReveal from "~/components/ui/BlurReveal.vue";
//导入
const {$gsap:gsap} = useNuxtApp();
type Props ={
  data: PreviewCardItem[],
  to: string,
  showToLink?:boolean,
}
const router = useRouter()
const props = withDefaults(defineProps<Props>(),{
  data: [],
  to: '',
  showToLink: true,
})
const container = useTemplateRef<HTMLElement>('container');
const cardItemEl = useTemplateRef<HTMLElement[]>('cardItemEl');
const tween:GSAPTween | null = null;

function detailClick(cardItem:PreviewCardItem) {
  if(cardItem.linkUrl){
    window.open(cardItem.linkUrl)
  }
//   跳转到详情页
  router.push({
    path: '/detail',
    query:{
      id: cardItem.id,
      title: cardItem.title,
      discuss: 0
    }
  })
}


// function startScrollAnimate(container:HTMLElement,elements:HTMLElement[]) {
//   gsap.to(elements, {
//     xPercent: -110 * (elements.length - 1),
//     // repeat: -1,
//     ease: 'none',
//     scrollTrigger:{
//       trigger: elements,
//       pin: true,
//       scrub: 1,
//       markers: true,
//       end: '+=330%',
//       start: "top 50%",
//       scroller: container
//     }
//   })
// }
// 监听data属性
function goToLink() {
  //   主页
  router.push({
    path: props.to,
  })
}
onMounted(()=> {
  const horizontalScroll = container.value;
  horizontalScroll?.addEventListener('wheel', function(e) {
    e.preventDefault();
    // 滚动页面的水平位置
    horizontalScroll!.scrollLeft += e.deltaY;
  })
})

function handleEffected() {
  console.log('effected')
}
</script>

<template>
  <div class="h-120 w-full m-auto relative">
<!--    <BoxReveal>-->
      <BlurReveal
          :delay="0.2"
          :duration="0.75"
          class="p-8"
          @effected="handleEffected"
      >
        <div ref="container" class="card-container w-auto h-full flex flex-shrink-0 gap-6 overflow-x-auto items-stretch overflow-y-hidden">
            <CardContainer v-for="(item,index) in props.data" :key="item.id" container-class="w-60 md:w-72 lg:w-80 2xl:w-96 h-full flex-shrink-0" class="h-44 md:h-52 lg:h-60 2xl:h-72 w-full card-item"  >
              <CardBody @click="detailClick(item)"  class="cardBox w-full cursor-pointer flex flex-nowrap p-6 lg:p-10  group/card relative h-full shadow hover:shadow-2xl rounded-xl border border-black/[0.1] bg-gray-50 dark:border-white/[0.2] dark:bg-black dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1]">
                <CardItem :translate-z="100" class="w-1/3 mr-3">
                  <n-image lazy class="h-full" object-fit="cover" preview-disabled :src="item.img || ''"  alt="图片">
                    <template #error>
                      <n-icon :size="100" color="lightGrey">
                        <i class="bx bx-image"></i>
                      </n-icon>
                    </template>
                  </n-image>
                </CardItem>
                <div class="flex flex-col flex-auto">
                  <CardItem :translate-z="60" class="flex-auto flex flex-col">
                    <n-h3 class="flex-grow-0 flex-shrink-0 overflow-hidden text-ellipsis whitespace-pre-wrap line-clamp-2" style="max-height: 2em;line-height: 1">{{item.title}}</n-h3>
                    <n-el class="text-container flex-auto">
                      <n-p>{{item.desc}}</n-p>
                    </n-el>
                  </CardItem>
                </div>
                <div class="absolute bottom-2 right-2">
                  <vs-button color="whatsapp" shape="circle" icon type="floating">
            <span class="box-border w-4 h-4 flex justify-center items-center">
              {{index+1}}
            </span>
                  </vs-button>
                </div>
              </CardBody>
            </CardContainer>
            <CardContainer container-class="w-60 md:w-72 lg:w-80 2xl:w-96 h-full flex-shrink-0" class="h-44 md:h-52 lg:h-60 2xl:h-72 w-full card-item">
              <CardBody @click="goToLink" class="cardBox w-full cursor-pointer flex flex-nowrap p-6 lg:p-10  group/card relative h-full shadow hover:shadow-2xl rounded-xl border border-black/[0.1] bg-gray-50 dark:border-white/[0.2] dark:bg-black dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1]">
                <CardItem :translate-z="60" class="flex-auto flex flex-col justify-center items-center">
                  <vs-button icon shape="circle" size="xl" type="floating" color="whatsapp" animation-type="rotate">
                    <!--                <span class="p-8">-->
                    查看更多>>>
                    <!--                </span>-->
                    <template #animate>
                      GO
                    </template>
                  </vs-button>
                </CardItem>
              </CardBody>
            </CardContainer>
        </div>
      </BlurReveal>

<!--    </BoxReveal>-->

  </div>
</template>

<style scoped lang="scss">
.card-container{
  scroll-snap-type: x mandatory;
  //scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

}
</style>